import { Input, View } from '@tarojs/components'
import Card from './Card'
import './index.scss'

function Selector() {
  return (
    <View className="wrapper">
      <Input defaultValue='' onInput={(e) => console.log(e.detail.value)} />
      <Card code='.textbox-1 div, .textbox-1 p' desc='匹配父级元素中，所有的 div 元素和 p 元素'>
        <View className='container textbox-1'>
          {'<div class="textbox-1">'}
          <View className='div'>{'<div></div>'}</View>
          <View className='div'>
            {'<div>'}
            <View className='p'>{'<p></p>'}</View>
            {'</div>'}
          </View>

          <View className='p'>{'<p></p>'}</View>
          <View className='section'>
            {'<section>'}
            <View className='p'>{'<p></p>'}</View>
            <View className='p'>{'<p></p>'}</View>
            {'</section>'}
          </View>
          {'</div>'}
        </View>
        <View className='p'>{'<p></p>'}</View>
      </Card>

      <Card code='p.text' desc="选取textbox-2里所有className='text'的p元素'">
        <View className='container textbox-2'>
          {'<div class="textbox-2">'}
          <View className='div'>{'<div></div>'}</View>
          <View className='div'>
            {'<div>'}
            <View className='p text'>{'<p class="text"></p>'}</View>
            {'</div>'}
          </View>
          <View className='p'>{'<p></p>'}</View>
          <View className='p text'>{'<p class="text"></p>'}</View>
          {'</div>'}
        </View>
      </Card>

      <Card code='div p' desc='选择textbox-3里所有div里的p元素'>
        <View className='container textbox-3'>
          {'<div class="textbox-3">'}
          <View className='div'>{'<div></div>'}</View>
          <View className='p'>{'<p></p>'}</View>
          <View className='div'>
            {'<div>'}
            <View className='p'>{'<p></p>'}</View>
            {'</div>'}
          </View>
          {'</div>'}
        </View>
      </Card>
      

      <Card code='div>p' desc='选择textbox-4里所有父级是div的p元素'>
        <View className='container textbox-4'>
          {'<div class="textbox-4">'}
          <View className='div'>{'<div></div>'}</View>
          <View className='p'>{'<p></p>'}</View>
          <View className='div'>
            {'<div>'}
            <View className='p'>{'<p></p>'}</View>
            {'</div>'}
          </View>
          {'</div>'}
        </View>
     </Card>

    
      <Card code='div+p' desc='选择textbox-5里所有紧跟在div之后的第一个p元素，只对同级节点有效'>
        <View className='container textbox-5'>
          {'<div class="textbox-5">'}
          <View className='div'>{'<div></div>'}</View>
          <View className='div'>{'<div></div>'}</View>
          <View className='p'>{'<p></p>'}</View>
          <View className='div'>
            {'<div>'}
            <View className='p'>{'<p></p>'}</View>
            {'</div>'}
          </View>
          <View className='p'>{'<p></p>'}</View>
          {'</div>'}
        </View>
      </Card>
      
      <Card code='div:first-letter' desc='textbox-6里每一个div的第一个字母'>
        <View className='container textbox-6'>
          {'<dic class="textbox-6">'}
          <View className='div'>这是一个div</View>
          <View className='div'>这是一个div</View>
          <View className='div'>这是一个div</View>
          {'</div>'}
        </View>
      </Card>

      <Card code='div~p' desc='选择textbox-7里div之后的每一个p元素,只会在同级里找'>
        <View className='container textbox-7'>
          {'<div class="textbox-7">'}
          <View className='div'>{'<div></div>'}</View>
          <View className='div'>{'<div></div>'}</View>
          <View className='p'>{'<p></p>'}</View>
          <View className='p'>{'<p></p>'}</View>
          <View className='div'>
            {'<div>'}
            <View className='p'>{'<p></p>'}</View>
            {'</div>'}
          </View>
          <View className='p'>{'<p></p>'}</View>
          {'</div>'}
        </View>
      </Card>

      <Card code='p:first-of-type' desc='选择textbox-8里每个p元素是其父级的第一个p元素'>
        <View className='container textbox-8'>
          {'<div class="textbox-8">'}
          <View className='div'>{'<div></div>'}</View>
          <View className='p'>{'<p></p>'}</View>
          <View className='div'>
            {'<div>'}
            <View className='p'>{'<p>1</p>'}</View>
            <View className='p'>{'<p>2</p>'}</View>
            {'</div>'}
          </View>
          {'</div>'}
        </View>
      </Card>

      <Card code='p:only-of-type' desc='选择textbox-9里每个p元素是其父级的唯一一个p元素,只有一个元素叫唯一'>
        <View className='container textbox-9'>
          {'<div class="textbox-9">'}
          <View className='div'>{'<div></div>'}</View>
          <View className='p'>{'<p></p>'}</View>
          <View className='div'>
            {'<div>'}
            <View className='p'>{'</p>'}</View>
            {'</div>'}
          </View>
          <View className='div'>
            {'<div>'}
            <View className='p'>{'<p>1</p>'}</View>
            <View className='p'>{'<p>2</p>'}</View>
            {'</div>'}
          </View>
          <View className='div'>
            {'<div>'}
            <View className='div'>{'<div></div>'}</View>
            <View className='p'>{'<p></p>'}</View>
            {'</div>'}
          </View>
          {'</div>'}
        </View>
      </Card>

      <Card code='p:nth-of-type(2)' desc='选择textbox-10里每个p元素是其父级的第二个p元素'>
        <View className='container textbox-10'>
          {'<div class="textbox-10">'}
          <View className='div'>{'<div></div>'}</View>
          <View className='p'>{'<p></p>'}</View>
          <View className='div'>
            {'<div>'}
            <View className='p'>{'</p>'}</View>
            {'</div>'}
          </View>
          <View className='div'>
            {'<div>'}
            <View className='p'>{'<p>1</p>'}</View>
            <View className='p'>{'<p>2</p>'}</View>
            {'</div>'}
          </View>
          {'</div>'}
        </View>
      </Card>

      <Card code='p:empty' desc='选择textbox-11里每个没有任何子级的p元素(包括文本)'>
        <View className='container textbox-11'>
          {'<div class="textbox-11">'}
          <View className='div'>{'<div></div>'}</View>
          <View className='p'>{'<p></p>'}</View>
          <View className='div'>
            {'<div>'}
            <View className='p'></View>
            {'</div>'}
          </View>
          {'</div>'}
        </View>
      </Card>

      <Card code=':not(p)' desc='选择textbox-12里每个并非p元素的元素'>
        <View className='container textbox-12'>
          {'<div class="textbox-12">'}
          <View className='div'>{'<div></div>'}</View>
          <View className='p'>{'<p></p>'}</View>
          <View className='div'>
            {'<div>'}
            <View className='p'>{'<p></p>'}</View>
            {'</div>'}
          </View>
          <View className='div'>{'<div></div>'}</View>
          {'</div>'}
        </View>
      </Card>

    </View>
  )
}

export default Selector
